import React, { useState } from 'react'
import '../styles/pc_login.css'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex, Modal } from 'antd';
import Captcha from '../components/Captcha'
import { debounce } from 'lodash';

export default function PC_Login() {

    const [phonenumber, setPhonenumber] = useState('')
    const [password, setPassword] = useState('')
    const [autoLogin, setAutoLogin] = useState(false)

    /* 防抖 */
    const debouncedOnFinish = debounce((values) => {
        showModal();
    }, 1000);

    const onFinish = (values) => {
        debouncedOnFinish(values);
    };

    /* 滑块modal */
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true)
    };
    const handleOk = () => {
        setIsModalOpen(false)
    };
    const handleCancel = () => {
        setIsModalOpen(false)
    };


    // 手机号校验规则
    const phoneNumberValidator = (_, value) => {
        const phoneReg = /^1[3-9]\d{9}$/;
        if (!value) {
            return Promise.reject('请输入您的手机号！');
        }
        if (!phoneReg.test(value)) {
            return Promise.reject('手机号格式不正确');
        }
        return Promise.resolve();
    };
    // 密码校验规则
    const passwordValidator = (_, value) => {
        if (!value) {
            return Promise.reject('请输入您的密码！');
        }
        if (value.length < 6) {
            return Promise.reject('密码长度至少为6位');
        }
        return Promise.resolve();
    };


    return (
        <div>
            <div className='pc-login-box'>
                <div className="main">
                    <div className="form-box">
                        <Form
                            name="login"
                            style={{
                                maxWidth: 360,
                            }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="phonenumber"
                                rules={[{ validator: phoneNumberValidator }]}
                            >
                                <Input prefix={<UserOutlined />} placeholder="手机号"
                                    value={phonenumber} onChange={(e) => { setPhonenumber(e.target.value) }} />
                            </Form.Item>

                            <Form.Item
                                name="password"
                                rules={[{ validator: passwordValidator }]}
                            >
                                <Input prefix={<LockOutlined />} type="password" placeholder="密码"
                                    value={password} onChange={(e) => { setPassword(e.target.value) }}
                                />
                            </Form.Item>
                            <Form.Item>
                                <Flex justify="space-between" align="center">
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox
                                            checked={autoLogin} onChange={(e) => { setAutoLogin(e.target.checked) }}
                                        >
                                            自动登录
                                        </Checkbox>
                                    </Form.Item>
                                    <a href="">忘记密码</a>
                                </Flex>
                            </Form.Item>

                            <Form.Item>
                                <Button block type="primary" htmlType="submit" >
                                    登录
                                </Button>
                                or <a href="">立即注册</a>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>


            <Modal title="" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} centered footer={null} >
                <Captcha phonenumber={phonenumber} password={password}></Captcha>
            </Modal>
        </div>
    )
}
